<template>
	<div id="shareUser">
		<div id="header">
			<img id="return" @click="$router.go(-1)" src="../../static/img/return.png"/>
			<ul>
				<li class="active">代言人</li>
				<li><router-link to="/user/shareAgent">微客</router-link></li>
			</ul>
			<router-link to="/user/spokesman"><img src="../../static/img/share-01.png"/></router-link>
		</div>
		<div class="shareUser_1">
			<img src="../../static/img/share-02.jpg"/>
			<p class="shareUser_1_1">已累计邀请粉丝{{something.count}}人</p>
			<p class="shareUser_1_2"><span>{{something.usReward}}元</span>现金</p>
			<!--<p class="shareUser_1_3">完成首单，粉丝可获得<span>{{something.signup}}</span>元现金</p>-->
		</div>
		<!--------二维码----------->
		<div class="shareUser_2">
			<img src="../../static/img/share-03.png"/>
			<div class="shareUser_2_1">
				<img src="../../static/img/share-04.png"/>
			</div>
			<div class="mycode">
				<img src="../../static/img/share-28.png"/>
			</div>
			<div class="shareUser_2_2">
				<div class="QRcode">
					<div class="QRcode" id="code">
					<!--<img src="../../static/img/code.png"/>-->
					</div>
				</div>
				<ul>
					<li>方法1：长按二维码，保存图标，分享给好友。</li>
					<li>方法2：点击下方分享按钮，分享到朋友圈或好友。</li>
				</ul>
			</div>
		</div>
		<!--------我的邀请码---------->
		<div class="shareUser_3">
			<img src="../../static/img/share-03.png"/>
			<p class="mycode">我的专属邀请码：<span>{{something.inviteCode}}</span></p>
			<router-link to="/user/myFans">
				<img src="../../static/img/share-05.png"/>
			</router-link>
		</div>
		<!-------粉丝奖励----------->
		<div class="shareUser_4">
			<img src="../../static/img/share-03.png"/>
			<p>粉丝奖励 </p>
			<ul>
				<li>①邀请粉丝完成注册，可立得<span>{{something.usSignup}}元</span></li>
				<li>①邀请粉丝完成首单后，再得<span>{{something.usReward}}元</span></li>
				<li>②粉丝领取三个试用品后，再得<span>{{something.apply}}金币</span></li>
			</ul>
			<div class="shareUser_4_item">
				<p>提示：</p>
				<p>你邀请的粉丝首次注册赶紧试，可享受新人专享99%中奖！</p>
			</div>
			<div class="shareUser_4_item">
				<p>举个栗子：</p>
				<p>你通过分享二维码邀请了一个粉丝注册，该粉丝完成首单后，你从该粉丝获得的<span>{{something.usReward}}元</span>现金，用户领取三次试用还能赠送<span>{{something.apply}}金币</span></p>
			</div>
		</div>
		<!------其他规则--------->
		<div class="shareUser_5">
			<img src="../../static/img/share-03.png"/>
			<p>其他规则</p>
			<ul>
				<li>1、奖励有效期为粉丝注册后的2个月内，现金在粉丝成功获得返款后到账</li>
				<!--<li>2、粉丝注册后<span>30天内</span>不下单，将<span>永久</span>解除与你的代言人关系，无法恢复；</li>-->
				<li>2、粉丝必须为赶紧试新用户，若通过反作弊系统检测出有作弊行为，将取消奖励、冻结余额并永久封号；</li>
				<li>3、你可通过微信、朋友圈等方式分享商品给粉丝领取；</li>
			</ul>
		</div>
		<!-------分享按钮--------->
		<router-link id="toShare" :to="{path: '/share', query:{invite: something.inviteCode}}">
			<img src="../../static/img/share-07.png"/>
			<p>立即分享领取{{something.usReward}}元现金</p>
		</router-link>
	</div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default{
	name: 'shareUser',
	data: function(){
		return {
			 something: {
			 	usSignup:0,//粉丝注册奖励2元
			 	inviteCode: '', // 邀请码
			 	count: 0, // 累计推广人数
			 	usReward: 10, // 推广奖励
			 	signup: 100, // 粉丝注册奖励
			 	apply: 100, // 粉丝三次申请奖励
			 	iniviteQrCode:'',
			 	usId: '', // 用户id
			 }, // 推广相关信息
		}
	},
	methods: {
		// 获取相关信息
		getSth: function(){
			var _this = this;
			_this.$axios.post("/user/extends/public/selectSth").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.something = data.result;
    				_this.qrcode();
				}else{
					console.log(data.result);
				}
			}).catch(function(err){
				console.log(err);
			});
		},
		qrcode:function() {
	      	let qrcode = new QRCode('code', {
	        	width: 100,
	        	height: 100, // 高度
	        	text: this.something.inviteUsLink // 二维码内容
	        })
	    },
	},
	created: function(){
		this.getSth();
	}
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.2rem;
	color: #4F4F4F;
	box-sizing: border-box;
	z-index: 10;
}
#header #return{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
#header a img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	right: 2rem;
}
#header ul{
	display: flex;
	width: 12rem;
	border: 1px solid #EEEEEE;
	border-radius: 3px;
	overflow: hidden;
}
#header ul li{
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.4rem;
}
#header ul li.active{
	background-color: #FF6565;
	color: #FFFFFF;
}
#shareUser{
	background-color: #FFE782;
	padding-bottom: 6rem;
}

.shareUser_1{
	position: relative;
}
.shareUser_1 img{
	width: 100%;
	display: block;
	margin-top: 4rem;
}
.shareUser_1_1{
	width: 100%;
	color: #4D95E4;
	font-size: 1.4rem;
	font-weight: 600;
	text-align: center;
	position: absolute;
	top: 22%;
}
.shareUser_1_2{
	width: 100%;
	text-align: center;
	color: #FF6565;
	font-size: 1.4rem;
	position: absolute;
	top: 54%;
}
.shareUser_1_2 span{
	font-size: 3.2rem;
	font-weight: 600;
	margin-right: 0.5rem;
}
.shareUser_1_3{
	font-size: 1.4rem;
	width: 100%;
	text-align: center;
	position: absolute;
	color: #FEF1A2;
	bottom: 9%;
}
.shareUser_1_3 span{
	font-size: 1.6rem;
	font-weight: 600;
}


.shareUser_2{
	width: 92.2%;
	background-color: #FE6572;
	margin: 0 auto;
	position: relative;
	padding-bottom: 2rem;
}
.shareUser_2>img{
	width: 94%;
	margin: 0 auto;
	display: block;
}
.shareUser_2_1{
	width: 94%;
	margin: 0 auto;
	margin-top: 2rem;
}
.shareUser_2_1>img{
	width: 100%;
	display: block;
}
.shareUser_2_2{
	width: 94%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1rem;
}
.shareUser_2_2 .QRcode{
	display: block;
	background-color: #fff;
	border-radius: 5px;
	padding: 0.4rem;
	box-sizing: border-box;
}
.shareUser_2_2 .QRcode img{
	width: 100%;
	display: block;
}
.shareUser_2_2 ul{
	width: 50%;
	color: #FFFFFF;
	font-size: 1.2rem;
	line-height: 2rem;
}
.shareUser_2_2 ul li:first-child{
	margin-bottom: 1rem;
}

.shareUser_3{
	width: 92.2%;
	background-color: #FE6572;
	margin: 0 auto;
	position: relative;
	padding-bottom: 2rem;
}
.shareUser_3>img{
	width: 94%;
	display: block;
	margin: 0 auto;
}
.shareUser_3 p{
	width: 90%;
	margin: 0 auto;
	height: 3rem;
	border-radius: 50px;
	background-color: rgba(0,0,0,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	color: #FEF1A2;
	margin-top: 2rem;
}
.shareUser_3 p span{
	font-size: 1.8rem;
	font-weight: 600;
}
.shareUser_3 a{
	width: 90%;
	display: block;
	margin: 0 auto;
	margin-top: 3rem;
}
.shareUser_3 a img{
	width: 100%;
	display: block;
}


.shareUser_4{
	width: 92.2%;
	background-color: #FE6572;
	margin: 0 auto;
	position: relative;
	padding-bottom: 0.5rem;
}
.shareUser_4 img{
	width: 94%;
	display: block;
	margin: 0 auto;
}
.shareUser_4>p{
	font-size: 1.6rem;
	color: #FEF1A2;
	text-align: center;
	margin-top: 2rem;
}
.shareUser_4 span{
	color: #FFDD42;
}
.shareUser_4 ul{
	width: 94%;
	margin: 0 auto;
	margin-top: 2rem;
}
.shareUser_4 ul li{
	font-size: 1.2rem;
	margin-bottom: 0.6rem;
	color: #4F4F4F;
}
.shareUser_4_item{
	width: 94%;
	margin: 0 auto;
	padding-bottom: 1.5rem;
	color: #4F4F4F;
}
.shareUser_4_item p:first-child{
	font-size: 1.4rem;
	font-weight: 600;
}
.shareUser_4_item p:last-child{
	font-size: 1.2rem;
	line-height: 2rem;
}

.shareUser_5{
	width: 92.2%;
	background-color: #FE6572;
	margin: 0 auto;
	position: relative;
	padding-bottom: 2rem;
	border-radius: 0 0 20px 20px;
}
.shareUser_5>img{
	width: 94%;
	display: block;
	margin: 0 auto;
}
.shareUser_5 p{
	font-size: 1.6rem;
	color: #FEF1A2;
	text-align: center;
	margin-top: 2rem;
}
.shareUser_5 span{
	color: #FFDD42;
}
.shareUser_5 ul{
	width: 94%;
	margin: 0 auto;
	margin-top: 2rem;
}
.shareUser_5 ul li{
	font-size: 1.2rem;
	margin-bottom: 0.6rem;
	line-height: 2rem;
	color: #4F4F4F;
}
#toShare{
	width: 100%;
	display: block;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10;
}
#toShare img{
	width: 100%;
	display: block;
}
#toShare p{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #C95600;
	font-size: 1.6rem;
	position: absolute;
	bottom: 0;
	left: 0;
}
.mycode img{
	height: 1.5rem;
    display: block;
    margin-top: 1rem;
    margin-left: 1rem;
}
</style>
